import React, { Component } from 'react';
import { Card, Button, Icon, Modal, Table, message } from 'antd';
import AddCategory from "./AddCategory"
import ResetCategory from "./ResetCategory"
import { CategoryAdd, CategoryGet ,CategoryUpate} from "../../../api/index"
import MyButton from "../../../components/button/MyButton"


class category extends Component {
    state = {
        visible: false,  //添加分类窗口的标识
        resetVisible: false,  //修改分类窗口的标识
        gradeFlage: "0",  //确定渲染是渲染一级分类还是二级分类的标识
        categoryList: [],  //存储所有一级分类的数组
        childrenCategory: [], //存储所有的二级分类的数组
        currentChildren: "", //当前所处的二级分类
        category:{},  //当前所选择的分类
        loading:true
    }
    componentDidMount() {
        this.getcategory();
    }

    //展示添加分类窗口
    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    //添加分类点击取消按钮触发的事件
    handleCanel = () => {
        this.setState({
            visible: false,
        });
        this.form.resetFields();//重置表单
    };

    //添加分类点击确定按钮触发的事件
    handleOk = () => {
        this.form.validateFields(async (err, values) => {
            if (!err) {
                const result = await CategoryAdd(values);
                if (result.status) {
                    message.success(result.msg);
                    this.getcategory();
                    this.setState({
                        visible: false,
                    });
                    this.form.resetFields();//重置表单
                } else {
                    message.error(result.msg);
                }
            }

        });

    }

    // 获取分类
    getcategory = async (args) => {
        const grade = args ? args : "0"
        const list = await CategoryGet({"categoryGrade":grade});
        if (grade === "0") {
            this.setState({
                categoryList: list,
                gradeFlage: "0",
                loading:false
            })
        } else {
            // console.log("我是二级分类")
            this.setState({
                childrenCategory: list,
                gradeFlage: "1",
                loading:false
            })
        }

    }

    // 获取二级分类
    handlerChilder = (args) => {
        const { _id, categoryName } = args
        this.setState({
            childrenCategory: [],
            currentChildren: categoryName
        }, () => {
            this.getcategory(_id);
        })

    }


    //展示修改分类名窗口 
    handleReset = (cate) => {

        this.setState({
            resetVisible: true,
            category: cate
        })
    }

    //修改分类名窗口点击确认按钮触发的事件
    resetOk = () => {
        this.UpdateName.validateFields(async (err, values) => {
            values._id=this.state.category._id
            // console.log(values);
            if (!err) {
                const result = await CategoryUpate(values);
                console.log(result);
                if (result.status) {
                    message.success(result.msg);
                    this.getcategory();
                    this.setState({
                        resetVisible: false,
                    });
                    this.UpdateName.resetFields();//重置表单
                } else {
                    message.error(result.msg);
                }
            }

        });
    }

    //修改分类名窗口点击取消按钮触发的事件
    resetCanel = () => {
        this.setState({
            resetVisible: false,
        });
        this.UpdateName.resetFields();//重置表单
    };

    render() {

        const { categoryList, childrenCategory, gradeFlage, currentChildren ,category ,loading} = this.state

        const extra = (<Button type="primary" onClick={this.showModal}>
            <Icon type="plus"></Icon>
            添加分类
        </Button>)

        const title = gradeFlage === "0" ? "一级分类" : (
            <span>
                <Button type="primary" onClick={() => this.getcategory()}>
                    <Icon type="left"></Icon>
                    返回
                </Button>
                <span style={{ marginLeft: 20 }}>
                    当前分类：<span style={{ color: "#3D628D", fontSize: 20 }}>{currentChildren}</span>
                </span>

            </span>
        )

        const columns = [
            {
                title: '分类名称',
                dataIndex: 'categoryName',
                key: '_id',
            },
            {
                title: '操作',
                width: 400,
                key: 'opration',
                render: (cate) => (
                    <span>
                        <MyButton style={{ marginRight: 20 }} onClick={() => this.handleReset(cate)}>修改分类名</MyButton>
                        {
                            gradeFlage === "0" ? <MyButton onClick={() => { this.handlerChilder(cate) }}>查看子分类</MyButton> : null
                        }

                    </span>
                )
            },
        ];


        return (
            <div>
                <Card title={title} extra={extra} style={{ borderBottom: "none" }}>
                    <Table
                        dataSource={gradeFlage === "0" ? categoryList : childrenCategory}
                        columns={columns}
                        rowKey="_id"
                        loading={loading}
                        bordered
                        pagination={{ defaultPageSize: 4 }}
                    />
                    <Modal
                        title="添加分类"
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCanel}
                        okText="确认"
                        cancelText="取消"
                    >
                        <AddCategory categoryList={categoryList} getForm={(dateFiles) => { this.form = dateFiles }}></AddCategory>
                    </Modal>
                    <Modal
                        title="修改分类名"
                        visible={this.state.resetVisible}
                        onOk={this.resetOk}
                        onCancel={this.resetCanel}
                        okText="确认"
                        cancelText="取消"
                    >
                        <ResetCategory name={category.categoryName} resetName={(obj) => { this.UpdateName = obj }}></ResetCategory>
                    </Modal>
                </Card>
            </div >
        );
    }
}

export default category;